<template>
    <div class="timeRecom">
         <div class="recommendedBox">
            <div class="recommendedLeft">
                <div class="recommendedOne recommendedTime" @click="m_play(songArr_id)" >
                    <p class="recommendedPOne">30</p>
                    <p class="recommendedPTwo">min</p>
                </div>
                <div class="recommendedTwo recommendedTime" @click="m_play(songArr_id)">
                  <p class="recommendedPOne">15</p>
                    <p class="recommendedPTwo">min</p>
                </div>
            </div>
            <div class="recommendedRight">
                <div class="recommendedThree recommendedTime" @click="m_play(songArr_id)">
                  <p class="recommendedPOne">60</p>
                    <p class="recommendedPTwo">min</p>
                </div>
                <div class="recommendedFour recommendedTime" @click="m_play(songArr_id)">
                  <p class="recommendedPOne">2</p>
                    <p class="recommendedPTwo">hrs</p>
                </div>
            </div>
        <h6 class="recomH6">智能推荐</h6>
    </div>
    <p class="recomPtext">选择不同时长，想听多久你来定</p>
    </div>
</template>

<script>
import jsonp from "jsonp";
export default {
  name: "timeRecom",
  data() {
    return {
      songArr: JSON.parse(sessionStorage.getItem("songArr")),
      song: Math.floor(Math.random() * 10)
    };
  },
  methods: {
    m_play(songArr) {
      this.$router.push("/timeRadio/" + songArr);
      this.$store.commit("ageisplayicon", false);
    }
  },
  computed:{
      songArr_id(){
        return  this.songArr[this.song].song_id
      }
  },
  created() {
    if (!this.songArr) {
      jsonp(
        "http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=2&size=10&offset=0",
        null,
        (err, res) => {
          if (!err) {
            this.songArr = res.song_list;
            sessionStorage.setItem(
              "songArr",
              JSON.stringify(res.song_list)
            );
          } else {
            console.log(err);
          }
        }
      );
    }
  }
};
</script>
 
<style lang="scss">
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 0;
}
.timeRecom {
  padding: 5.1rem 0;
  .recommendedBox {
    width: 100%;
    padding: 0 6%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    margin-top: 0.35rem;

    .recommendedLeft {
      width: 47%;
      height: 4.25rem;
      float: left;
      position: relative;
      .recommendedOne {
        position: absolute;
        top: 0;
        right: 0;
      }
      .recommendedTwo {
        position: absolute;
        bottom: 0;
        left: 0;
      }
    }
    .recommendedRight {
      width: 47%;
      height: 4.25rem;
      float: right;
      position: relative;
      .recommendedFour {
        position: absolute;
        bottom: 0;
        right: 0;
      }
    }
    .recomH6 {
      font-size: 0.5rem;
      font-weight: normal;
      position: absolute;
      bottom: 0;
      left: 41%;
    }
  }
  .recomPtext {
    font-size: 0.43rem;
    text-align: center;
    color: #ababab;
    padding-top: 0.35rem;
  }
  .recommendedTime {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: #21c5bd;
    color: #fff;
    text-align: center;
    .recommendedPOne {
      font-size: 0.85rem;
      line-height: 0.85rem;
      padding-top: 0.43rem;
    }
    .recommendedPTwo {
      font-size: 0.5rem;
    }
  }
}
</style>

